<template>
  <div>
    <div class="head">
      <div class="button" @click="$router.go(-1)">
        <span class="iconfont icon-arrow-left-bold"></span>
      </div>
      <span class="iconfont icon-diandian fr"  @click=" loginoutflag =!loginoutflag"></span>
      
    </div>
    <div class="back" :style="{'background': 'url('+message.profile.backgroundUrl+')'}"></div>
    <div class="usermsg">
      <div class="userpho">
        <img :src="message.profile.avatarUrl" alt="">      
      </div>
      <div class="user">
          <dl>
            <dt>
              <h1 class="usname">{{message.profile.nickname}}</h1>
              </dt>
            <dd>
              <span>{{message.profile.follows}}&nbsp;关注</span>
            </dd>
            <dd>
              <span>{{message.profile.follows}}&nbsp;粉丝</span>
            </dd>
            <dd>
              <span>Lv.{{message.level}}</span>
            </dd>
          </dl>
      </div>
    </div>
    <div class="userlist">
        <dl >
          <dt>
            <h2>创建的歌单<span>({{usercreatelist.length}}个)</span></h2>
          </dt>
          <dd v-for="(item,index) in usercreatelist" :key="index" @click="gotoMisiclist(item.id)">
            <div class="img">
              <img :src="usercreatelist[index].coverImgUrl" alt="">
            </div>
            <div class="info"> 
              <h2>{{usercreatelist[index].name}}</h2>
              <h3>{{usercreatelist[index].trackCount}}首，播放{{usercreatelist[index].playCount}}次</h3>
            </div>
          </dd>
        </dl>
      </div>
    <div class="usercollectlist">
        <dl >
          <dt>
            <h2>收藏的歌单<span>({{usercollectlist.length}}个)</span></h2>
          </dt>
          <dd v-for="(item,index) in usercollectlist" :key="index"  @click="gotoMisiclist(item.id)">
            <div class="img">
              <img :src="usercollectlist[index].coverImgUrl" alt="">
            </div>
            <div class="info"> 
              <h2>{{usercollectlist[index].name}}</h2>
              <h3>{{usercollectlist[index].trackCount}}首，播放{{usercollectlist[index].playCount | playCountA}}次</h3>
            </div>
          </dd>
        </dl>
      </div>
      <div class="loginout" v-show="loginoutflag">
        <div class="out">
            <h1>个人中心</h1>
            <h2 @click="loginout">退出登录</h2>
        </div>
      </div>
  </div>
  
</template>

<style lang="less">
html{
  background-color: #F4F4F4;
}
.head {
  position: fixed;
  top: 0;
  height: 80px;
  width: 100%;
  
  .button {
    position: absolute;
    color: #fff;
    left: 32px;
    top: 26px;
    height: 40px;
    line-height: 40px;
    font-size: 35px;
    span{
      display: inline-block;
      font-size: 32px;
      vertical-align: top;
    }
    
  }
  .fr{
      position: absolute;
      right: 32px;
      top: 26px;
      font-size: 32px;
      color: #fff;
      z-index: 21;
    }
  
}
.back{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 525px;
  // background: url(../../assets/img/01.jpg) 0 0 no-repeat;
  background-size: 100%;
  z-index: -1;
}
.usermsg{
  position: absolute;
  top: 498px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 580px;
  height: 236px;
  background-color: #fff;
  border-radius: 20px;
  .userpho{
    position: absolute;
    right: 50%;
    top: -73px;
    margin-right: -73px;
    width: 146px;
    height: 146px;
    background-color: #fff;
    border: 2px solid #E2E2E2;
    border-radius: 50%;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%
    }
  }
  .user{
    position: absolute;
    top: 90px;
    left: 170px;
    width: 242px;
    height: 76px;
    text-align: center;
    .usname{
      color: red;
      font-size: 38px;
      padding: 0;
    }
    dd{
        display: inline-block;
        width: 79px;
        height: 20px;
        font-size: 18px;
        text-align: center;
      }
  }
}
.userlist{
  position: absolute;
  top: 765px;
  left: 0;
  right: 0;
  margin: auto;
  // height: 315px;
  background-color: #fff;
  width: 580px;
  border-radius: 20px;
  dt{
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-indent: 1em;
    h2{
      font-size: 32px;
    }
    span{
      margin-left: 8px;
      font-size: 20px;
      color: #898989;
    }
  }
  dd{ 
      margin-bottom: 15px;
      height: 91px;
      display: flex;
      text-indent: 1em;
    .img{
      flex: 0 0 88px;
      text-align: center;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .info{
      flex: 1;
      text-indent: 2em;
      h2 {
        font-size: 25px;
        color: #3a3c3c;
        margin-top: 18px;
        font-weight: normal;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      h3 {
        font-size: 20px;
        color: #777978;
        font-weight: normal;
      }
    }
  }
}
.usercollectlist{
  position: absolute;
  top: 1200px;
  left: 0;
  right: 0;
  margin: auto;
  // height: 315px;
  background-color: #fff;
  width: 580px;
  border-radius: 20px;
  dt{
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-indent: 1em;
    h2{
      font-size: 32px;
    }
    span{
      margin-left: 8px;
      font-size: 20px;
      color: #898989;
    }
  }
  dd{ 
      margin-bottom: 15px;
      height: 91px;
      display: flex;
      text-indent: 1em;
    .img{
      flex: 0 0 88px;
      text-align: center;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .info{
      flex: 1;
      text-indent: 2em;
      h2 {
        font-size: 25px;
        color: #3a3c3c;
        margin-top: 18px;
        font-weight: normal;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      h3 {
        font-size: 20px;
        color: #777978;
        font-weight: normal;
      }
    }
  }
}
.loginout{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20;
    .out{
      position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #F4F4F4;
    text-align: center;
    border-radius: 12px;
    }
    
    h1{
      font-size: 32px;
      font-weight: normal;
      border-bottom: 2px solid #e2e2e2;
    }
    h2{
      background-color: #fff;
      height: 50px;
      font-size: 30px;
      font-weight: normal;
    }
  }
</style>

<script>
import {getUser, getUserlist,logout} from '../../api/user'
// import {getDetail } from "../../api/recommend"
export default {
    data() {
      return {
        userid:this.$store.state.userid,
        message:{
          profile:{avatarUrl:"",backgroundUrl:""},
          
        },
        userlist:"",
        usercreatelist:[],
        usercollectlist:[],
        loginoutflag:false
      }
    },
    methods: {
      getUserFun(){
        console.log(this.$store.state.userid);
        getUser({uid:this.userid}).then((data)=>{
          this.message = data
          console.log(data);
        })
      },
      getUserlistFun(){
        getUserlist({uid:this.userid}).then((data)=>{
          this.userlist=data.playlist
          console.log(this.userlist);
        })
      },
      gotoMisiclist(id){
        this.$router.push({
          path:"./recommend/musiclist",
          query:{
            id
          }
        })
      },
      loginout(){
        logout().then((data)=>{
          if(data.code==200){
            this.$store.commit("deluserid")
            this.$store.commit("delLogin")
            console.log(this.$store.state.login);
            this.$router.push({
              path:"/login"
            })
          }
        })
      },
    },
    watch:{
      userlist:{
        handler:function(){
          for(let i=0;i<this.userlist.length;i++){
            if(this.userlist[i].userId == this.userid){
              this.usercreatelist.push(this.userlist[i])
            }else{
              this.usercollectlist.push(this.userlist[i])
            }
          }
          this.$store.commit("setuserlikelist",this.usercreatelist[0])
        }
      },
      userlikelist:{
        handler:function(){
          console.log(111);
        }
      }
    },
    filters:{
        playCountA(value){
            let w = value > 10000 ? value/10000 : value;// 万计算
            let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
            return y;
        }
    },
    computed:{
      userlikelist(){
        return this.$store.state.userlikelist
      }
    },  
    created() {
      this.getUserFun();
      this.getUserlistFun()
    },
}
</script>